import TableTypes from "../../../model/TableTypes.ts";
import {TableData} from "../../../model/TableData.ts";
import _ from 'lodash';
import useModalState from "../../../settings/GlobalStates.ts";
import {baseUrl} from "../../../settings/Settings.ts";
import * as bootstrap from "bootstrap";


const Row = (props: { type: TableTypes, row: TableData, modalTrigger: (arg: TableData) => void, updateDataOnPage: () => void}) => {


    //instead of modal trigger there could be global state, which will simplify the process of passing data, but I am not doing it right now
    const {type, row, modalTrigger, updateDataOnPage} = props
    const setState = useModalState((state) => state.callFromEdit)

    const toastLiveExample = document.getElementById('liveToast');

    const triggerToast = () => {
        const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);
        toastBootstrap.show();
    };
    const deleteStack = async () => {
        try {

            const response = await fetch(`${baseUrl}/api/stack/delete`, {
                method: 'DELETE',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(row),
            });
            JSON.stringify(row)
            const returnedData = await response.json();
            updateDataOnPage()
            triggerToast()
            console.log(returnedData);

            // Update the local state by filtering out the deleted stack

        } catch (error) {
            console.error('Error deleting stack');
        }
    }

    switch (type) {

        case TableTypes.BOOKS:


            return (
                <tr>
                    <th scope="row">1</th>
                    <td>{row.bookId}</td>
                    <td>{row.categoryId}</td>
                    <td>{row.stackId}</td>
                    <td>{row.ownerId}</td>
                    <td>{row.condition}</td>
                    <td>{row.fee}</td>
                    <td>{row.price}</td>
                    <td>{row.status}</td>
                    <td>
                        <button className={"btn btn-outline-secondary me-2 rounded-5 outlined-button"}
                                data-bs-toggle="modal" data-bs-target="#exampleModal" onClick={() => {
                            setState()
                            modalTrigger(row)
                        }}>
                            Edit
                        </button>
                        <button className={"btn btn-outline-secondary rounded-5 outlined-button"}>
                            Delete
                        </button>


                    </td>

                </tr>
            )

        case TableTypes.USERS:

            return (


                <tr>
                    <th scope="row">1</th>
                    <td>{row.userId}</td>
                    <td>{row.password}</td>
                    <td>{row.type}</td>

                    <td>{row.borrowLimit}</td>
                    <td>{row.firstName}</td>
                    <td>{row.lastName}</td>
                    <td>{row.email}</td>
                    <td>{row.address}</td>
                    <td>
                        <button className={"btn btn-outline-secondary me-2 rounded-5 outlined-button"}
                                data-bs-toggle="modal" data-bs-target="#exampleModal" onClick={() => {
                            setState()
                            modalTrigger(row)
                        }}>
                            Edit
                        </button>
                        <button className={"btn btn-outline-secondary rounded-5 outlined-button"}>
                            Delete
                        </button>


                    </td>
                </tr>


            )

        case TableTypes.MANAGERS:

            return (
                <>
                    //TODO data row for managers
                </>

            )


        case TableTypes.STACKS:

            return (
                <tr>
                    <td>{row.stackId}</td>
                    <td>{row.categoryId}</td>
                    <td>{row.title}</td>

                    <td>{_.truncate(row.description, {length: 26, separator: '...'})}</td>
                    <td>{row.author}</td>
                    <td>{row.status}</td>
                    <td>{row.quantity}</td>
                    <td>
                        <button className={"btn btn-outline-secondary me-2 rounded-5 outlined-button"}
                                data-bs-toggle="modal" data-bs-target="#exampleModal">
                            View
                        </button>
                    </td>
                    <td>
                        <button className={"btn btn-outline-secondary me-2 rounded-5 outlined-button"}
                                data-bs-toggle="modal" data-bs-target="#exampleModal" onClick={() => {
                            setState()
                            modalTrigger(row)
                        }}>
                            Edit
                        </button>
                        <button className={"btn btn-outline-secondary rounded-5 outlined-button"} onClick={deleteStack}>
                            Delete
                        </button>


                    </td>
                </tr>

            )

        case TableTypes.ORDERS:

            return (

                <tr>
                    <td>{row.orderId}</td>
                    <td>{row.userId}</td>
                    <td>{row.dateCreated}</td>

                    <td>{row.status}</td>
                    <td>{row.quantity}</td>
                    <td>{row.class}</td>
                    <td>{row.dateExpires}</td>

                    <td>
                        <button className={"btn btn-outline-secondary me-2 rounded-5 outlined-button"}
                                data-bs-toggle="modal" data-bs-target="#exampleModal" onClick={() => {
                            setState()
                            modalTrigger(row)
                        }}>
                            Edit
                        </button>
                        <button className={"btn btn-outline-secondary rounded-5 outlined-button"} onClick={deleteStack}>
                            Delete
                        </button>


                    </td>
                </tr>
            )

        default:
            throw new Error("In Row Component: the passed type is not a Table Type")
    }
}


export default Row

